Att navigera det immersiva landskapet: Klassificering av WebXR-inmatningskällor och detektering av kontrolltyper

Världen av Extended Reality (XR), som omfattar Virtual Reality (VR) och Augmented Reality (AR), utvecklas snabbt. När utvecklare strävar efter att skapa mer intuitiva och engagerande immersiva upplevelser blir det avgörande att förstå och effektivt hantera användarens inmatning. WebXR, standarden för att leverera XR-innehåll direkt via webbläsare, erbjuder kraftfulla verktyg för detta. En kritisk aspekt av att bygga robusta WebXR-applikationer är förmågan att klassificera inmatningskällor och detektera kontrolltyper. Detta möjliggör skräddarsydda interaktioner, förbättrad tillgänglighet och en mer konsekvent användarupplevelse över ett brett spektrum av hårdvara.

Vikten av att klassificera inmatningskällor

I en immersiv miljö medieras en användares interaktion genom olika inmatningsenheter. Dessa kan sträcka sig från enkla blickbaserade val till sofistikerade spårade kontroller, handgester eller till och med kroppsrörelser. För att en WebXR-applikation ska kunna svara på ett lämpligt och naturligt sätt måste den förstå vilken typ av inmatning som tillhandahålls. Det är här klassificering av inmatningskällor kommer in i bilden.

Varför är denna klassificering så avgörande för en global publik?

• Hårdvarudiversitet: XR-marknaden är översvämmad med enheter från många tillverkare i olika prisklasser och formfaktorer. En global applikation måste kunna hantera denna heterogenitet på ett smidigt sätt. Till exempel kommer en VR-upplevelse designad för avancerade PC VR-headset som Valve Index att ha andra inmatningsmöjligheter än en som riktar sig till ett fristående mobilt VR-headset som Meta Quest, eller en AR-enhet som Magic Leap eller en smartphone som kör ARKit/ARCore.
• Användarförväntningar: Användare förväntar sig att deras valda XR-enhet beter sig förutsägbart i en applikation. Om ett knapptryck på deras kontroll inte utför den förväntade åtgärden på grund av en feltolkning av inmatningen leder det till frustration och kan snabbt få dem att tappa intresset för upplevelsen.
• Tillgänglighet: Olika inmatningsmetoder tillgodoser olika användares behov och förmågor. Genom att klassificera inmatningar kan utvecklare erbjuda alternativa interaktionsmetoder, vilket säkerställer att fler människor kan komma åt och njuta av deras immersiva innehåll. Till exempel kan användare med begränsad handrörlighet förlita sig mer på blick- eller röstinmatning.
• Prestandaoptimering: Att känna till inmatningskällans kapacitet kan informera optimeringsstrategier. Till exempel kan komplex handspårning kräva mer processorkraft än en enkel spelkontroll.
• Plattformskonsistens: Även om WebXR strävar efter ett enhetligt API, kan de underliggande hårdvaruimplementationerna variera. Robust klassificering hjälper till att överbrygga dessa skillnader och upprätthålla en viss grad av konsistens.

Förstå WebXR:s inmatningskällor

WebXR Device API tillhandahåller mekanismer för att få tillgång till information om anslutna inmatningsenheter. Det primära sättet att interagera med dessa är via XRInputSource-objektet, som representerar en enskild inmatningskälla ansluten till XR-sessionen. Ett XRInputSource-objekt ger information om:

• Målstråle (Target Ray): Riktningen i vilken inmatningskällan pekar.
• Grepp (Grip): Positionen och orienteringen för inmatningskällan i rymden, vilket ofta representerar var en virtuell hand skulle hålla en kontroll.
• Profiler (Profiles): En sträng eller en array av strängar som beskriver inmatningskällans kapacitet och förväntade beteende.
• Händighet (Handedness): Om inmatningskällan är avsedd för vänster eller höger hand.
• Funktioner (Features): Specifika inmatningsfunktioner som är tillgängliga, såsom knappar, styrspakar eller pekplattor.

Egenskapen XRInputSource.profiles: Nyckeln till klassificering

Egenskapen profiles är utan tvekan det mest kraftfulla verktyget för att klassificera inmatningskällor. Det är en array av strängar som leverantörer använder för att ange typen och kapaciteten hos inmatningsenheten. Dessa profiler är standardiserade av Khronos Groups specifikation för Extensible XR Input Profile, med målet att tillhandahålla ett gemensamt språk för att beskriva XR-inmatningsenheter.

Vanliga profilexempel:

• 'generic-hand': Indikerar en allmän inmatningskälla för handspårning.
• 'google-daydream-controller': Specifikt för Google Daydream-kontrollen.
• 'htc-vive-controller': För HTC Vive-kontroller.
• 'oculus-touch-controller': För Oculus (nu Meta) Touch-kontroller.
• 'microsoft-mixed-reality-controller': För Windows Mixed Reality-kontroller.
• 'microsoft-edge-motion-controller': För rörelsekontroller associerade med Microsoft Edge.
• 'vive-tracker': För HTC Vive Trackers.
• 'keyboard': Representerar tangentbordsinmatning.
• 'mouse': Representerar musinmatning.

Genom att kontrollera dessa profilsträngar kan utvecklare bestämma typen av kontroll och skräddarsy sin applikations logik därefter.

Detektera kontrolltyper: Praktiska tillvägagångssätt

Kärnan i detektering av kontrolltyper ligger i att iterera igenom de anslutna XRInputSource-objekten inom en aktiv XR-session och undersöka deras profiles-egenskap.

Steg-för-steg detekteringslogik

1. Hämta XR-session: Först behöver du en aktiv XRSession. Denna erhålls vanligtvis efter att en användare har begärt en XR-session och den har startats framgångsrikt.

               
       navigator.xr.requestSession('immersive-vr').then(session => {
           // Sessionen har startat, nu kan vi komma åt inmatningskällor
           session.addEventListener('inputsourceschange', handleInputSourcesChange);
           handleInputSourcesChange({ session }); // Inledande kontroll
       });
       
               
   
                 
                   Copy
                 
               
             

2. Åtkomst till inmatningskällor: Egenskapen session.inputSources tillhandahåller en array med alla anslutna XRInputSource-objekt.

               
       function handleInputSourcesChange(event) {
           const session = event.session;
           const inputSources = session.inputSources;
   
           inputSources.forEach(inputSource => {
               // Klassificera varje inputSource här
               classifyInputSource(inputSource);
           });
       }
       
               
   
                 
                   Copy
                 
               
             

3. Iterera och klassificera: Inom din klassificeringsfunktion, loopa igenom profiles-arrayen för varje XRInputSource.

               
       function classifyInputSource(inputSource) {
           console.log('Input Source Profiles:', inputSource.profiles);
   
           if (inputSource.profiles.includes('oculus-touch-controller')) {
               console.log('Oculus Touch Controller upptäckt!');
               // Applicera Oculus Touch-specifik logik
               handleOculusTouch(inputSource);
           } else if (inputSource.profiles.includes('htc-vive-controller')) {
               console.log('HTC Vive Controller upptäckt!');
               // Applicera HTC Vive-specifik logik
               handleViveController(inputSource);
           } else if (inputSource.profiles.includes('generic-hand')) {
               console.log('Handspårning upptäckt!');
               // Applicera handspårningsspecifik logik
               handleHandTracking(inputSource);
           } else if (inputSource.profiles.includes('mouse') || inputSource.profiles.includes('keyboard')) {
               console.log('2D-inmatning upptäckt (mus/tangentbord)');
               // Applicera 2D-inmatningslogik
               handle2DInput(inputSource);
           }
           // Lägg till fler else if-villkor för andra profiler
       }
       
               
   
                 
                   Copy
                 
               
             

4. Hantera inmatningshändelser: När du har identifierat kontrolltypen kan du sedan lyssna efter specifika inmatningshändelser (t.ex. knapptryckningar, styrspaksrörelser) och mappa dem till din applikations åtgärder. Händelsen input på XRSession är en bra utgångspunkt, men specifika kontroller kan ha sina egna händelselyssnare eller kräva avfrågning (polling).

               
       session.addEventListener('selectstart', (event) => {
           if (event.inputSource.profiles.includes('oculus-touch-controller')) {
               console.log('Oculus Touch avtryckare nedtryckt!');
               // Specifik åtgärd för Oculus Touch-avtryckaren
           }
       });
       
               
   
                 
                   Copy
                 
               
             

Hantering av saknade eller generiska profiler

Inte alla XR-enheter exponerar nödvändigtvis mycket specifika profiler. I sådana fall kan du stöta på mer generiska profiler som 'generic-xr-controller' eller till och med inga profiler alls. Det är här reservstrategier (fallback) är nödvändiga:

• Återgå till Gamepad API: Om XRInputSource exponerar en gamepad-egenskap kan du falla tillbaka på det vanliga Gamepad API. Detta ger ett mer universellt sätt att komma åt knapptryckningar och axelvärden, även om den exakta kontrollmodellen inte explicit identifieras av en profil. WebXR API överbryggar i huvudsak Gamepad API för XR-kontexter.
• Standardinteraktioner: För helt oigenkända inmatningskällor, eller för enheter utan dedikerade kontroller (som enkla VR-visare), kan du behöva implementera standardinteraktioner. Detta kan vara blickbaserade val, en enkel knapp på headsetet eller till och med att kräva att användaren ansluter en kompatibel spelkontroll.
• Användarmeddelanden: I tvetydiga situationer är det ofta bäst att fråga användaren. Om till exempel en generisk kontroll upptäcks kan du fråga: "Är detta en rörelsekontroll eller en spelkontroll?" Detta ger användaren möjlighet att vägleda applikationens inmatningsmappning.

Avancerad klassificering och överväganden

Även om profilsträngar är den primära mekanismen finns det andra faktorer att beakta för en omfattande WebXR-inmatningsstrategi:

1. Handspårning vs. Kontrollspårning

Att skilja mellan handspårning (t.ex. 'generic-hand') och spårning av fysiska kontroller är avgörande. Handspårning erbjuder en mer naturalistisk, kontrollfri interaktion, men dess precision och spårningsnoggrannhet kan variera. Kontrollspårning, även om den är mindre naturlig, ger ofta mer exakt och konsekvent inmatning för åtgärder som kräver finmotorik.

Exempel: I en VR-applikation som låter användare rita, skulle du vilja använda handspårning för friformsritningsgester. Men för exakt objektmanipulation eller knappaktivering kan en kontroll vara att föredra. Din klassificeringslogik bör möjliggöra växling mellan dessa lägen eller använda dem kontextuellt.

2. Funktioner för inmatningskälla

Utöver bara typen kan en granskning av de tillgängliga funktionerna på en XRInputSource förfina din klassificering och interaktionsdesign. Medan profiles ger en övergripande ledtråd är det mer robust att kontrollera specifika kapabiliteter.

• Knappar: Har den avtryckarknappar, greppknappar, menyknappar?
• Axlar: Har den styrspakar eller pekplattor som ger analog inmatning?
• Sensorer: Har den haptisk feedback-kapacitet?

Specifikationen för WebXR Input Profiles definierar ett gemensamt vokabulär för dessa funktioner (t.ex. 'trigger', 'squeeze', 'thumbstick', 'touchpad', 'button'). Du kan kontrollera förekomsten av dessa funktioner.

Notera: Att direkt kontrollera funktioner kan kräva mer direkt interaktion med den underliggande XR-runtime-miljön eller en polyfill om API:et inte exponerar dem direkt på ett universellt bekvämt sätt. Dock korrelerar profiles ofta starkt med tillgängliga funktioner.

3. Händighet (Handedness)

Egenskapen inputSource.handedness ('left' eller 'right') är avgörande för att korrekt orientera virtuella händer eller tilldela vänsterhänta kontroller. Detta är enkelt men essentiellt för en bekväm upplevelse.

4. Målstråle-läge (Target Ray Mode)

Egenskapen inputSource.targetRayMode kan vara antingen 'gaze' eller 'pointing'. Detta talar om hur inmatningen riktas:

• 'gaze': Inmatningen styrs av vart användaren tittar. Detta är vanligt i VR-upplevelser med enbart headset eller för vissa AR-interaktioner.
• 'pointing': Inmatningen styrs av en fysisk kontroll eller en spårad hand. Detta är det vanligaste läget för kontroller.

Att förstå detta hjälper till att bestämma den lämpliga interaktionsmetaforen. För 'gaze' kan du använda en markör som följer användarens blick. För 'pointing' utgår strålen från kontrollen eller handen.

5. Globalisering av inmatningsmappning

Egenskapen profiles erbjuder en utgångspunkt, men sann global applikationsdesign kräver att man mappar dessa standardiserade profiler till användarcentrerade interaktioner. Tänk på:

• Konventioner för knappmappning: Medan profiler antyder knapptyper (t.ex. 'trigger'), kan den exakta åtgärden (t.ex. skjuta, välja, greppa) behöva vara konfigurerbar eller följa vanliga konventioner för olika regioner eller applikationsgenrer. Till exempel, i många västerländska spel kan den primära åtgärdsknappen finnas på den högra kontrollen, men detta är inte universellt sant.
• Språk och ikoner: Se till att alla UI-element relaterade till kontroller är lokaliserade. Ikoner är generellt mer universella, men textetiketter måste översättas.
• Tillgänglighetsprofiler för inmatning: Överväg att utöka din klassificering för att identifiera inmatningskällor som kan vara en del av tillgänglighetslösningar, såsom specialiserade adaptiva kontroller. Även om WebXR:s nuvarande profilsystem kanske inte explicit tillgodoser varje nischad tillgänglighetsenhet, är ett flexibelt system som kan utökas fördelaktigt.

Exempel: Bygga en applikation för flera kontrolltyper

Låt oss titta på ett förenklat exempel på en WebXR-applikation designad för att fungera med både Oculus Touch-kontroller och handspårning, och som visar olika UI-element eller kontroller baserat på den upptäckta inmatningskällan.

Scenario: En VR-applikation som låter användare interagera med 3D-objekt. När de använder Oculus Touch-kontroller kan användare greppa objekt med greppknappen och peka med avtryckaren. När de använder handspårning kan användare greppa med en nypgest och interagera med UI-element genom att peka.

            
let session = null;
let controllers = {}; // För att lagra inmatningskällor med deras ID

function setupXR() {
    navigator.xr.requestSession('immersive-vr').then(xrSession => {
        session = xrSession;
        session.addEventListener('inputsourceschange', handleInputSourcesChange);
        session.addEventListener('selectstart', handleSelectStart);
        session.addEventListener('squeezestart', handleSqueezeStart);
        session.addEventListener('end', () => {
            session = null;
            console.log('XR-session avslutad.');
        });
        handleInputSourcesChange({ session: session }); // Inledande synkronisering
        console.log('XR-session startad.');
    }).catch(err => {
        console.error('Fel vid begäran av XR-session:', err);
    });
}

function handleInputSourcesChange(event) {
    const inputSources = event.session.inputSources;
    
    // Rensa bort gamla kontroller som inte längre är anslutna
    for (const id in controllers) {
        if (!inputSources.find(src => src.handedness === controllers[id].handedness)) {
            delete controllers[id];
            // Uppdatera eventuellt UI för att återspegla frånkopplad kontroll
            console.log(`Kontroll ${id} frånkopplad.`);
        }
    }

    // Bearbeta nya och befintliga inmatningskällor
    inputSources.forEach(inputSource => {
        controllers[inputSource.gamepad.index] = inputSource; // Använder gamepad-index som ett stabilt ID
        classifyInputSource(inputSource);
    });
}

function classifyInputSource(inputSource) {
    console.log('Inmatningskällans ID:', inputSource.gamepad.index, 'Profiler:', inputSource.profiles);

    if (inputSource.profiles.includes('oculus-touch-controller')) {
        console.log(`Oculus Touch Controller (${inputSource.handedness}) upptäckt.`);
        // Tilldela specifika hanterare eller tillstånd för Oculus Touch
        if (inputSource.handedness === 'left') {
            controllers[inputSource.gamepad.index].type = 'oculus_touch_left';
        } else {
            controllers[inputSource.gamepad.index].type = 'oculus_touch_right';
        }
    } else if (inputSource.profiles.includes('generic-hand')) {
        console.log(`Handspårning (${inputSource.handedness}) upptäckt.`);
        controllers[inputSource.gamepad.index].type = 'hand_tracking';
        // Uppdatera eventuellt UI för att visa indikatorer för handspårning
    } else {
        console.log(`Okänd kontrolltyp eller generisk gamepad (${inputSource.handedness}) upptäckt.`);
        controllers[inputSource.gamepad.index].type = 'generic';
    }
}

function handleSelectStart(event) {
    const inputSource = controllers[event.inputSource.gamepad.index];
    if (!inputSource) return;

    console.log('Select Start på:', inputSource.type);

    switch(inputSource.type) {
        case 'oculus_touch_right': // Antar att primärt val är avtryckaren för höger kontroll
            console.log('Oculus Touch-avtryckare nedtryckt. Griper objekt eller aktiverar UI.');
            // Implementera grepp/aktiveringslogik för Oculus Touch
            break;
        case 'hand_tracking':
            console.log('Handnypning upptäckt. Interagerar med UI.');
            // Implementera UI-interaktionslogik för handspårningsnypning
            break;
        case 'generic':
            console.log('Generisk kontrolls valknapp nedtryckt.');
            // Reservlogik för generiska kontroller
            break;
    }
}

function handleSqueezeStart(event) {
    const inputSource = controllers[event.inputSource.gamepad.index];
    if (!inputSource) return;

    console.log('Squeeze Start på:', inputSource.type);

    switch(inputSource.type) {
        case 'oculus_touch_left': // Antar att grepp är squeeze för vänster kontroll
            console.log('Oculus Touch-grepp nedtryckt. Griper objekt.');
            // Implementera grepplogik för Oculus Touch-grepp
            break;
        case 'hand_tracking':
            console.log('Handgrepp (sluten näve) upptäckt. Griper objekt.');
            // Implementera grepplogik för handspårning med sluten näve
            break;
        case 'generic':
            console.log('Generisk kontrolls squeeze-knapp nedtryckt.');
            // Reservlogik för generiska kontroller
            break;
    }
}

// Anropa setupXR() när din applikation är redo att starta en XR-session.
// Till exempel, vid ett klick på en knapp:
// document.getElementById('enter-vr-button').addEventListener('click', setupXR);

// Du skulle också behöva hantera händelser för när inmatning släpps (selectend, squeezeend)
// och potentiellt andra inmatningshändelser som rörelser med styrspak/pekplatta.

            

              
                Copy
              
            
          

Utmaningar och framtida riktningar

Trots framstegen kvarstår utmaningar:

• Profilstandardisering: Även om den förbättras växer listan över standardiserade profiler fortfarande, och leverantörer kan implementera anpassade eller mindre beskrivande profiler.
• Enhetsemulering: Att testa på ett brett utbud av enheter är svårt. Emulatorer kan hjälpa men replikerar inte perfekt verklig hårdvaruprestanda och interaktionsnyanser.
• Förutse användarens avsikt: Även med korrekt klassificering kan det vara komplext att härleda användarens exakta avsikt, särskilt med den mångfald av inmatningsmetoder som finns tillgängliga.
• Plattformsöverskridande nyanser: WebXR siktar på plattformsöverskridande kompatibilitet, men skillnader i renderingspipelines, spårningsnoggrannhet och tillgängliga sensorer mellan plattformar (t.ex. WebXR på mobil AR vs. PC VR) kan fortfarande leda till varierande upplevelser.

Framtiden kommer sannolikt att se ännu mer sofistikerade inmatningsmetoder växa fram, inklusive avancerad haptik, ögonspårning och helkroppsspårning integrerade i WebXR-upplevelser. Specifikationen för WebXR Input Profile kommer att fortsätta att utvecklas för att rymma dessa nya paradigm.

Praktiska insikter för utvecklare

För att bygga effektiva WebXR-applikationer som tillgodoser en global publik:

• Prioritera profilkontroll: Använd alltid inputSource.profiles som din primära metod för att identifiera inmatningsenheter.
• Implementera reservlösningar (fallbacks): Designa din applikation för att elegant nedgradera eller anpassa sig när specifika profiler inte upptäcks, genom att använda Gamepad API eller generiska interaktionsmodeller.
• Testa utförligt: Om möjligt, testa din applikation på så många olika XR-enheter som du kan få tillgång till, över olika plattformar och formfaktorer.
• Designa för flexibilitet: Bygg inmatningsmappningssystem som är modulära och enkelt kan utökas för att stödja nya enheter eller användarkonfigurerbara kontroller.
• Användarfeedback är nyckeln: Ge tydliga visuella ledtrådar till användarna om vilken inmatning som upptäcks och hur den mappas. Tillåt användaranpassning där det är lämpligt.
• Tänk på tillgänglighet från början: Fundera över hur olika inmatningsmetoder kan tjäna användare med varierande förmågor.
• Håll dig uppdaterad: Håll dig ajour med förändringar och tillägg till WebXR API och specifikationen för Input Profiles.

Slutsats

Att bemästra klassificering av WebXR-inmatningskällor och detektering av kontrolltyper är inte bara en teknisk detalj; det är grundläggande för att skapa inkluderande, intuitiva och njutbara immersiva upplevelser för en världsomspännande publik. Genom att noggrant analysera inmatningsprofiler, implementera robusta reservmekanismer och designa med flexibilitet i åtanke kan utvecklare säkerställa att deras WebXR-applikationer erbjuder en sömlös och engagerande resa för varje användare, oavsett vilken hårdvara de väljer för att utforska metaversum.